<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <input type="text" id="a">
    <select name="" id="sel">
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text" id="b">
    <button id="btn">=</button>
    <input type="text" id="c">

    <script>


        // 函数声明的时候，function name(形参) 

        // 函数调用的时候，name(实参)


        function calc(a, b, f) {
            switch (f) {
                case '+': return a + b;
                case '-': return a - b;
                case '*': return a * b;
                case '/': return a / b;
            }
        }



        // 拿对象
        var oInp1 = document.getElementById('a') ;
        var oInp2 = document.getElementById('b') ;
        var oSel = document.getElementById('sel') ;
        var oBtn = document.getElementById('btn') ;
        var oRes = document.getElementById('c') ;

        // 事件
        //   事件驱动型函数  --- 没有名字的函数，只会在触发事件以后才会被调用
        oBtn.onclick = function() {
            var n1 = oInp1.value * 1 ;
            var n2 = oInp2.value * 1 ;
            var f = oSel.value ;
            oRes.value = calc(n1 , n2 , f) ;
        }





    </script>

</body>

</html>